<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="justify-between group_1" v-if="isUpgrade">
				<text class="text_1">合约要点提示</text>
				<view class="flex-col items-center text-wrapper justify-center"><text class="text_2"
						@click="go('/pages/guide/guide?identification=heyue')">查看</text></view>
			</view>
			<view class="flex-col section_1">
				<u--form labelPosition="left" labelWidth="400" :model="form" :rules="rules" :borderBottom="false"
					ref="form1">
					<view class="justify-between group_2">
						<u-form-item label="名称" prop="userInfo.name">
							<text class="text_5">
								<u--input fontSize="30" placeholderClass="input-placeholder" inputAlign='right'
									placeholder="请输入合同名称" v-model="form.name" border="none"></u--input>
							</text>
						</u-form-item>
					</view>
					<view class="justify-between group_2">
						<u-form-item class="w-full" label="合同类型" prop="userInfo.name">
							<view class="u-flex u-flex-1 u-row-right">
								<text class="text_5">{{form.accountbookTypeName}}</text>
							</view>

						</u-form-item>

					</view>
					<view class="flex-col group_2">
						<view class="justify-between group_2">
							<u-form-item label="原合同额" prop="userInfo.name">
								<text class="text_5">
									<u--input fontSize="30" type="number" inputAlign='right'
										placeholderClass='input-placeholder' placeholder="请输入原合同额"
										v-model="form.originalContract" border="none"></u--input>
								</text>
							</u-form-item>
						</view>
						<view class="justify-between group_2">
							<u-form-item label="结算合同额" prop="userInfo.name">
								<text class="text_5">
									<u--input fontSize="30" type="number" inputAlign='right'
										placeholderClass='input-placeholder' placeholder="请输入结算合同额"
										v-model="form.settlementContract" border="none"></u--input>
								</text>
							</u-form-item>
						</view>
						<view class="justify-between group_2" v-for="(it,i) in form.paymentTimesList" :key="i">
							<u-form-item :label="'第'+noToChinese(i+1)+'次付款'" prop="userInfo.name">
								<text class="text_5">
									<u--input fontSize="30" type="number" inputAlign='right'
										placeholderClass='input-placeholder'
										:placeholder="'请输入第'+noToChinese(i+1)+'次付款'" v-model="it.money" border="none">
									</u--input>
								</text>
							</u-form-item>
						</view>

						<view class="flex-col group_6">

							<view class="justify-evenly section_2">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868010275878721.png"
									class="image_1" />
								<text class="text_22" @click.stop="add">添加</text>
							</view>
						</view>
					</view>
				</u--form>
			</view>
			<view class="flex-col section_3">
				<view class="flex-col group_8">
					<view class="justify-between group_7">
						<text class="text_14">剩余尾款</text>
						<text class="text_16">{{tail}}</text>
					</view>
					<view class="justify-between group_7">
						<text class="text_14">变更额</text>
						<text class="text_16">¥{{left}}</text>
					</view>
					<text class="text_27">备注</text>
					<view class="flex-col u-m-t-20">
						<u-textarea height="150" confirmType="done" v-model="form.remarks" placeholder="请填写相关使用情况"
							ref="textarea"></u-textarea>
					</view>
				</view>
				<view class=" flex-col items-center button" @click="submit"><text class="text_29">保存</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				rules: {

				},
				isUpgrade: 0,
				form: {
					name: '',
					originalContract: '',
					settlementContract: '',
					paymentTimesList: [{
						paymentTimesId: '',
						accountbookId: '',
						money: ''
					}]
				}
			};
		},
		onLoad(option) {
			if (option.name) {
				this.form.accountbookTypeName = option.name;
			}
			if (option.id && option.lid) {
				this.form.accountbookTypeId = option.id;
				this.form.accountbookId = option.lid;
				this.getAccountbook(this.form.accountbookId);
			}
		},
		created() {
			this.getUpgrade()
		},
		computed: {
			left() {
				if (this.form.settlementContract > 0 && this.form.originalContract > 0) {
					return this.form.settlementContract - this.form.originalContract
				} else {
					return 0;
				}

			},
			tail() {
				if (this.form.settlementContract > 0) {

					let total = 0;
					this.form.paymentTimesList.map(item => {
						total += parseInt(item.money ? item.money : 0)
					})
					console.log(this.form.settlementContract);
					console.log(total);
					return this.form.settlementContract - total;
				} else {
					return '';
				}
			}
		},
		methods: {
			getUpgrade() {
				this.$http('lbook.isUpgrade').then(r => {
					if (r.code == 200) {
						if (r.data == 1) {
							this.isUpgrade = true;
						} else {
							this.isUpgrade = false;
						}
					}
				});
			},
			add() {
				this.form.paymentTimesList.push({
					paymentTimesId: '',
					accountbookId: '',
					money: ''
				})
			},
			getAccountbook(accountbookId) {
				this.$http('lbook.getAccountbook', {
					accountbookId: accountbookId
				}).then(r => {
					if (r.code == 200) {
						if (r.data) {
							this.form = r.data;
						}
					}
				});
			},
			submit() {
				if (!this.form.originalContract) {
					this.$u.toast('请输入原合同额');
					return;
				}
				if (!this.form.settlementContract) {
					this.$u.toast('请输入结算合同额');
					return;
				}
				this.form.remainingBalance = this.tail;
				this.form.changeAmount = this.left;
				this.$http('lbook.updateEdit', this.form).then(r => {
					if (r.code == 200) {
						
						uni.navigateBack({
							delta: 1
						});
						
					}
				});
			},
			//阿拉伯数字转中文数字
			noToChinese(num) {
				if (!/^\d*(\.\d*)?$/.test(num)) {

					return "Number is wrong!";
				}
				let AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
				let BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
				let a = ("" + num).replace(/(^0*)/g, "").split("."),
					k = 0,
					re = "";
				console.log(a);
				for (let i = a[0].length - 1; i >= 0; i--) {
					console.log(k);
					switch (k) {
						case 0:
							re = BB[7] + re;
							break;
						case 4:
							if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
								re = BB[4] + re;
							break;
						case 8:
							re = BB[5] + re;
							BB[7] = BB[5];
							k = 0;
							break;
					}
					if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
					if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
					k++;
				}
				if (a.length > 1) //加上小数部分(如果有小数部分)
				{
					re += BB[6];
					for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
				}
				return re;
			}
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .uni-input-input {
		width: 285rpx;
		margin-right: 0;
	}


	uni-textarea {
		width: 97%;

		padding-left: 20rpx;
	}

	.group_2 {
		padding: 8rpx 0;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_5 {
		padding: 31rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		padding: 30rpx 0 25rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_3 {
		color: #333333;
		font-size: 30rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_14 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_16 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 29rpx 32rpx 22rpx;
	}

	.section_1 {
		padding-left: 32rpx;
		padding-right: 30rpx;
		background-color: #ffffffff;
	}

	.section_3 {
		margin-top: 20rpx;
		padding: 0 30rpx 48rpx 32rpx;
		background-color: #ffffffff;
	}

	.text_1 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text-wrapper {
		padding: 8rpx 16rpx;
		background-color: #1d6aff;
		border-radius: 24rpx;
		width: 116rpx;

	}

	.group_3 {
		padding-top: 31rpx;
	}

	.group_4 {
		margin-top: 40rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.group_8 {
		padding-bottom: 30rpx;
	}

	.button {
		margin-top: 34rpx;
		// padding: 19rpx 0 31rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 24rpx;

	}

	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_6 {
		padding-bottom: 32rpx;
	}

	.text_27 {
		margin-top: 30rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text-wrapper_1 {
		margin-top: 33rpx;
		// padding: 22rpx 0 165rpx;
		background-color: #f6f7f9;
		border-radius: 16rpx;
	}

	.text_29 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section_2 {
		margin-top: 32rpx;
		// padding: 13rpx 36rpx 21rpx 37rpx;
		height: 64rpx;
		align-self: flex-end;
		border-radius: 32rpx;
		background-image:
			url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868009820166926.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 152rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text_28 {
		margin-left: 26rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_21 {
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_1 {
		width: 22rpx;
		height: 22rpx;
	}

	.text_22 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		margin-left: 8rpx;
	}
</style>
